<div class="search-wrap">
  <ion-header >
    <ion-toolbar style="--background:#fff">

      <ion-buttons style="margin-left: 15px;" slot="start" appDebounceClick (debounceClick)="back()">
        <img class="header-icon-img" src="assets/img/back_left.png" >
      </ion-buttons>  
      <ion-searchbar class="search-bar" placeholder={{tagData?.placeholder}} autocomplete="off"  onInput="if(value.length>20)value=value.slice(0,20)" [(ngModel)]="keyword" mode="ios" (ionFocus)="focusInput()" (ionChange)="searchChange()"></ion-searchbar>
    
      <ion-buttons  class="search-btn" slot="end" appDebounceClick (debounceClick)="search('')" [ngStyle]="{'color': searchBtnColor}" >
        搜索
      </ion-buttons>
    </ion-toolbar>

  </ion-header>

  <ion-content *ngIf="!hasSearched">
    <div *ngFor="let item of searchArr">
      <ion-item detail="false" class="list-item" appDebounceClick (debounceClick)="search(item)">
        <ion-label>
          <img class="icon" src="assets/img/lately.png" alt="xxx">
          <span class="ion-label-span">{{item}}</span>
        </ion-label>
      </ion-item>
      <hr class="list-sep">
    </div>
    <p class="tac clearText" *ngIf="searchArr?.length>0" appDebounceClick (debounceClick)="clearHistory()">
      <img class="icon-del" src="assets/img/search_icon_delete@3x.png" alt="xxx">
      <span>清除历史记录</span>
    </p>
  </ion-content>

</div>